<template>
  <div class="minder-editor-container">
    <div class="tools">
      <button @click="minder.execCommand('camera', minder.getRoot(), 600)" class="basebtn">重新定位</button>
      <button @click="minder.execCommand('zoomIn')" class="basebtn">放大</button>
      <button @click="minder.execCommand('zoomOut')" class="basebtn">缩小</button>
      <button @click="removerEditor" class="basebtn">移除</button>
      <select @change="minder.execCommand('template', rootData.template)" v-model="rootData.template" class="baseSelect">
        <option v-for="(item, index) in templateList" :key="index" :value="index">{{ item }}</option>
      </select>
      <select @change="minder.execCommand('theme', rootData.theme)" v-model="rootData.theme" class="baseSelect">
        <option v-for="(item, index) in themeList" :key="index" :value="index">{{ item }}</option>
      </select>
      <button @click="savebtn" class="basebtn" style="float:right;" v-if="saveShow">保存</button>
      <button @click="exportHandle(0)" class="basebtn" style="float:right;">导出png图片</button>
    </div>
    <div :id="id"></div>
  </div>
</template>

<script>
  // import imageUpload from '../imageUpload'
  const Editor = require('../../editor');
  console.log("Editor",Editor)
  import '../../../examples/styles/minder.css';
  import '../../../static/kityminder.min.css'
  import {
    generateMixed
  } from '../../utils/index.js';
  import memory from '../../services/memory';
  import jsPDF from 'jspdf-qz';
  console.log(generateMixed(12));
  export default {
    name: 'mind-editor',
    props: {
      importData: {
        type: Object,
        default: function() {
          return {

          }
        }
      },
      AccessKey: {
        type: String,
        default: ''
      },
      SecretKey: {
        type: String,
        default: ''
      },
      Domain: {
        type: String,
        default: ''
      },
      scope: {
        type: String,
        default: ''
      },
      isImageUpload: {
        type: Boolean,
        default: true
      },
      template: {
        type: String,
        default: 'right'
      },
      theme: {
        type: String,
        default: 'fresh-blue'
      },
      saveShow: {
        type: Boolean,
        default: true
      },
      id: {
        type: String,
        default: generateMixed(12)
      },
    },
    components: {},
    data() {
      return {
        minder: null,
        navIndex: 0,
        templateList: {
          default: '思维导图',
          tianpan: '天盘图',
          structure: '组织结构图',
          filetree: '目录组织图',
          right: '逻辑结构图',
          'fish-bone': '鱼骨头图'
        },
        themeList: {
          'classic': '脑图经典',
          'classic-compact': '紧凑经典',
          'snow': '温柔冷光',
          'snow-compact': '紧凑冷光',
          'fish': '鱼骨图',
          'wire': '线框',
          'fresh-red': '清新红',
          'fresh-soil': '泥土黄',
          'fresh-green': '文艺绿',
          'fresh-blue': '天空蓝',
          'fresh-purple': '浪漫紫',
          'fresh-pink': '脑残粉',
          'fresh-red-compat': '紧凑红',
          'fresh-soil-compat': '紧凑黄',
          'fresh-green-compat': '紧凑绿',
          'fresh-blue-compat': '紧凑蓝',
          'fresh-purple-compat': '紧凑紫',
          'fresh-pink-compat': '紧凑粉',
          'tianpan':'经典天盘',
          'tianpan-compact': '紧凑天盘'
        },
        rootData: {
          root: {
            children: [],
            data: {
              text: "默认节点",
              id: generateMixed(12)
            }
          },
          template: 'structure',
          theme: 'fresh-blue'
        }
      };
    },
    mounted() {

    },
    methods: {
      savebtn() {
        let json = this.minder.exportJson();
        this.$emit('saveData', json);
      },
      exportHandle(n) {
        console.log("导出")
        let that = this;
        if (n === 0) {
          that.minder.exportData('png').then(content => {
            // console.log("content",content)
            // const ele = document.createElement('a');
            // const evt = document.createEvent('HTMLEvents');
            // evt.initEvent('click', true, true);
            // ele.download = this.rootData.root.data.text || '无标题';
            // ele.href = content;
            // ele.click();
            // document.body.removeChild(ele);
            let element = document.createElement('a');
            element.setAttribute('href', content);
            let filename = that.rootData.root.data.text || '无标题';
            element.setAttribute('download', filename);
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
          });
        } else if (n === 1) {
          this.minder.exportData('png').then(content => {
            var doc = new jsPDF();
            doc.addImage(content, 'PNG', 0, 0, 0, 0);
            doc.save(`${this.rootData.root.data.text || '无标题'}.pdf`);
          });
        }
      },
      getThemeList() {},
      renddata() {
        let that = this;
        that.$nextTick(() => {
          const getId = document.getElementById(that.id);
          setTimeout(function() {
            that.minder = window.editor = new Editor(getId).minder;
            that.$set(that.rootData, 'root', that.rootData.root);
            that.minder.importJson(that.rootData);
            that.$emit('minderHandle', that.minder);
            that.minder.on('contentchange', val => {
              /* 内容改变时 */
              var json = that.minder.exportJson();
              console.log("exportData", json)
              that.$emit('exportData', json);
            });
            that.minder.on('selectionchange', function(e) {
              that.minder = e.minder;
              var node = e.minder.getSelectedNode();
              that.currentNode = node;
              if (node && node.parent) {
                setTimeout(function() {
                  node.parent.layout();
                }, 0);
              }
              if (that.lock && node) {}
              that.lock = true;
            });
            that.minder.on('beforeExecCommand', function(e) {
              /* 按钮触发 */
              if (/arrange/i.test(e.commandName)) {} else if (/append/i.test(e.commandName)) {} else if (
                /remove/i.test(e.commandName)) {}
            });
            that.minder.on('AfterExecCommand', function(e) {
              if (/append/i.test(e.commandName)) {} else if (/remove/i.test(e.commandName)) {}
            })
          }, 300)
        });
      },
      removerEditor(){//移除脑图
         let self = document.getElementById(this.id);
         let parent = self.parentElement;
         let removed = parent.removeChild(self);
      }
    },
    watch: {
      importData: {
        handler: function(newVal, oldVal) {
          if(this.importData!=''&&this.importData!=null){
              this.rootData.root = this.importData
          }
          if(this.theme!=null&&this.theme!=''){
              this.rootData.theme = this.theme
          }
          let arr = Object.keys(this.rootData.root);
          if (arr.length == 0) {
            this.rootData.root = {
              data: {
                text: '默认节点',
                id: generateMixed(12)
              },
              children: []
            }
          }
          this.renddata();
        },
        deep: true, //深度监听
        immediate: true //初次绑定执行回调
      },
       rootData(){
         console.log("rootData",this.rootData)
       }
    }
  };
</script>
<style lang="less" scoped>
  .basebtn {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
  }

  .baseSelect {
    height: 32px;

    option {
      min-height: 1.5em;
    }
  }
</style>
